<template>
    <view class="container">
        <img @click="open"  :src="img" alt="" />
        <view class="description">
            <text class="title">{{title}}</text>
            <text class="author">{{author}}</text>
            <view class="foot">
                <text class='footer'>{{fav_nums}}喜欢</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "book",
    props:{
        img:{
            type:String,
        },
        title:{
            type:String,
        },
        author:{
            type:String,
        },
        fav_nums:{
            type:String,
        },
    },
    data () {
        return {
        };
    },
    methods: {
        open () {
            // const bid = this.properties.book.id
            uni.navigateTo({
                url: "../../../pages/book-detail/book-detail"
            })
        }
    },
}
</script>

<style lang="scss">
.container {
    margin-top: 30rpx;
    display: flex;
    position: relative;
    box-shadow: 2px 2px 3px #e3e3e3;
    flex-direction: column;
    width: 240rpx;
    height: 360rpx;
}
.container image {
    width: 100%;
    height:100%;
    border-radius: 2px;
}

.description {
    width: 216rpx;
    position: absolute;
    bottom: 0;
    background-color: #fff;
    padding: 5rpx 10rpx 8rpx 15rpx;
    font-size: 24rpx;
    display: flex;
    flex-direction: column;
    border-bottom-right-radius: 2px;
    border-bottom-left-radius: 2px;
}
.title {
    margin-top: 10rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.author {
    font-size: 20rpx;
    color: #999999;
    margin-bottom: 10rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.foot {
    font-size: 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}
.footer {
    color: #666666;
}
</style>
